<!-- 经营数据 -->
<template>
	<view class="pages">
		<image class="pages-bgimg" src="/static/images/common/top-bgimg.png" mode="scaleToFill"></image>
		<!-- 提现框 -->
		<view class="cash-box fcc" v-if="staffsEarn">
			<view class="tips">
				可提现金额(元)
			</view>
			<view class="cash fc-w fw-6">
				{{staffsEarn.user_earnings}}
			</view>
			<view class="cash-btn fc-ac fcc fs-lg"
				@click="$fn.toPages(`/pages/commission/withdrawal?money=${staffsEarn.user_earnings}`)">
				申请提现
			</view>
		</view>
		<!-- 收益数据tab -->
		<view class="pages-card  pl-30 pr-30">
			<p-income-tab></p-income-tab>
		</view>

		<!-- 订单收益概况 -->
		<view class="pages-card mt-20" v-if='earnOrder'>
			<view class="row-box mb-30 pages-card-title">
				<view class="flex">
					<text class="fc-3 fw-6">订单收益概况</text>
				</view>
				<view class="flex align-items-center" @click="$fn.toPages('/pages/commission/orderIncome')">
					<text class=" fc-9">更多</text>
					<text class="iconfont fc-9 fcc fs-sm ml-20">
						&#xe687;
					</text>
				</view>
			</view>
			<view class="panel-tab">
				<view class="tab-item " v-for="(item,index) in timeList" :key="index"
					:class="{'tab-item-ac':index==orderIndex}" @click="changeOrderTab(index)">
					{{item.name}}
				</view>
			</view>
			<view class="panel-item-box row-box" @click="$fn.toPages('/pages/commission/orderIncome?stateIndex=1')">
				<view class="state">
					已付款
				</view>
				<view class="num">
					<view class="fc-3 fw-6">
						订单数
					</view>
					<view class="fc-warn mt-10">
						{{earnOrder.pay_order_num}}
					</view>
				</view>
				<view class="income">
					<view class="fc-3 fw-6">
						预估收益
					</view>
					<view class="fc-9 mt-10">
						￥{{earnOrder.pay_order_earn}}
					</view>
				</view>
				<text class="iconfont fc-9 ">
					&#xe687;
				</text>
			</view>
			<view class="panel-item-box row-box" @click="$fn.toPages('/pages/commission/orderIncome?stateIndex=2')">
				<view class="state">
					已完成
				</view>
				<view class="num">
					<view class="fc-3 fw-6">
						订单数
					</view>
					<view class="fc-warn mt-10">
						{{earnOrder.complete_order_num}}
					</view>
				</view>
				<view class="income">
					<view class="fc-3 fw-6">
						实际收益
					</view>
					<view class="fc-9 mt-10">
						￥{{earnOrder.complete_order_earn}}
					</view>
				</view>
				<text class="iconfont fc-9 ">
					&#xe687;
				</text>
			</view>
		</view>

		<!-- 效果数据概况 -->
		<view class="pages-card mt-20" v-if='false'>
			<view class="row-box mb-30 pages-card-title">
				<view class="flex">
					<text class="fc-3 fw-6">效果数据概况</text>
				</view>
				<!-- <view class="flex align-items-center">
					<text class=" fc-9">更多</text>
					<text class="iconfont fc-9 fcc fs-sm ml-20">
						&#xe687;
					</text>
				</view> -->
			</view>
			<view class="panel-tab">
				<view class="tab-item " v-for="(item,index) in timeList" :key="index"
					:class="{'tab-item-ac':index==effectIndex}" @click="changeEffectTab(index)">
					{{item.name}}
				</view>
			</view>
			<view class="panel-item-box row-box">
				<view class="state">
					<view class="fc-3 fw-6">
						点击量
					</view>
					<view class="fc-warn mt-10">
						--
					</view>
				</view>
				<view class="num">
					<view class="fc-3 fw-6">
						引入UV
					</view>
					<view class="fc-warn mt-10">
						--
					</view>
				</view>
				<view class="income">
					<view class="fc-3 fw-6">
						预估收益
					</view>
					<view class="fc-9 mt-10">
						￥--
					</view>
				</view>
				<text class="iconfont fc-9 ">
					&#xe687;
				</text>
			</view>
			<view class="panel-item-box row-box">
				<view class="state">
					订单数
				</view>
				<view class="num">
					<view class="fc-3 fw-6">
						有效订单数
					</view>
					<view class="fc-warn mt-10">
						--
					</view>
				</view>
				<view class="income">
					<view class="fc-3 fw-6">
						实际收益
					</view>
					<view class="fc-9 mt-10">
						￥--
					</view>
				</view>
				<text class="iconfont fc-9 ">
					&#xe687;
				</text>
			</view>
		</view>
		<!-- 技术支持 -->
		<p-support class=""></p-support>
	</view>
</template>

<script>
	import {
		apiGetStaffsEarn,
		apiApply,
		apiApplyLog,
		apiEarnList,
		apiEarnOrder,
		apiEarnOrderList
	} from '@/api/commission.js'
	export default {
		data() {
			return {
				// 订单收益模块Tba
				orderTabList: [],
				orderIndex: 0,
				// 效果数据模块Tba
				effectTabList: [],
				effectIndex: 0,
				// 统计数据
				staffsEarn: null,
				earnOrder: null
			};
		},
		async onLoad() {
			await this.getStaffsEarn()
			await this.getEarnOrder()
		},
		async onShow() {
			await this.$onLaunched;
			await this.getUserinfo(true)
			await this.getStaffsEarn()
			await this.getEarnOrder()
		},
		methods: {
			async getStaffsEarn() {
				this.staffsEarn = await apiGetStaffsEarn()
			},
			async getEarnOrder() {
				this.earnOrder = await apiEarnOrder({
					page_no: 1,
					page_size: 10,
					time_type: this.timeList[this.orderIndex].value
				})
			},

			// 切换tab
			changeOrderTab(index) {
				this.orderIndex = index
				this.getEarnOrder()
			},
			changeEffectTab(index) {
				this.effectIndex = index
			}
		},
		computed: {
			timeList() {
				return [{
						name: '全部',
						value: 0
					},
					{
						name: '今日',
						value: 1
					},
					{
						name: '昨日',
						value: 2
					},
					{
						name: '近7天',
						value: 8
					},
					{
						name: '近30天',
						value: 9
					},
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		position: relative;
		padding: 0 0 44px;
	}

	// 背景图
	.pages-bgimg {
		width: 750rpx;
		height: 678rpx;
		position: absolute;
		top: calc(678 - (678 - 490))rpx;
		left: 0;
		z-index: 0;
	}

	// 提现
	.cash-box {
		padding: 40px 0;
		position: relative;
		z-index: 1;

		.tips {
			color: rgba(255, 255, 255, 0.50);
		}

		.cash {
			line-height: 80rpx;
			font-size: 72rpx;
			margin: 12rpx 0 30rpx;
		}

		.cash-btn {
			width: 240rpx;
			height: 80rpx;
			border-radius: 12rpx;
			background-color: #fff;
			line-height: 1rem;
		}
	}

	// 收益tab的信息
	.pages-card {
		// background-color: #fff;
		position: relative;
		z-index: 1;
		margin: 0 auto 20rpx;

		.val {
			font-size: 40rpx;
			line-height: 50rpx;
		}
	}

	// 订单收银概况
	.pages-card-title {
		height: 60rpx;
	}

	.panel-tab {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 20rpx;

		.tab-item {
			line-height: 64rpx;
			border-radius: 8rpx;
			text-align: center;
			background-color: rgba(244, 244, 244, 1);
		}

		.tab-item-ac {
			color: #00A191;
			background-color: rgba(232, 255, 252, 1);
		}
	}

	.panel-item-box {
		height: 144rpx;

		.state {
			width: 200rpx;
		}

		.num {
			flex: 1;
		}

		.income {
			flex: 1;
		}

		.iconfont {
			margin-left: 20rpx;
			width: 30rpx;
		}
	}
</style>